<template>
  <!-- 资产类型占比饼图 -->
  <div class="typePercentEchartPage" id="percentChartBox"></div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { homeApi } from "@/api/home";
import echarts from "@/common/utils/echarts.js";

const myPercentChart = ref(null);
const options = reactive({
  tooltip: {
    trigger: "item",
  },
  series: [
    {
      name: "占比",
      type: "pie",
      right: "20",
      radius: ["20%", "50%"],
      avoidLabelOverlap: false,
      color: ["#FC7018", "#48D1F5", "#898DFF", "#FBB62A", "#F12527"],
      itemStyle: {
        borderRadius: 4,
        borderColor: "#fff",
        borderWidth: 4,
      },
      tooltip: {
        show: false,
      },
      label: {
        formatter: "{value|{c} %}\n{name|{b}}",
        lineHeight: 20,
        rich: {
          value: {
            fontSize: 14,
            color: "#1A1A1A",
          },
        },
      },
      data: [
        // { value: 484, name: "绿岛" },
      ],
    },
  ],
});

const initPercentChartData = () => {
  homeApi.proportionOfAssetTypes().then((res) => {
    const { code, data, msg } = res;
    if (code == 200) {
      if (data && data.length) {
        data.map((n, i) => {
          let obj = {
            value: n.percentage,
            name: n.assetsTypeName,
          };
          options.series[0].data.push(obj);
        });
      } else {
        options.series[0].data.push({
          value: 0,
          name: "比例",
        });
      }

      myPercentChart.value.setOption(options);
      resizePieChart();
    }
  });
};

const initMyChart = () => {
  // 基于准备好的dom，初始化echarts实例
  myPercentChart.value = echarts.init(
    document.getElementById("percentChartBox")
  );
  initPercentChartData();
};

const resizePieChart = () => {
  // 根据页面大小自动响应图表大小
  window.addEventListener("resize", function () {
    setTimeout(() => {
      myPercentChart.value.resize();
    }, 500);
  });
};

onMounted(() => {
  initMyChart();
});
</script>

<style lang="scss" scoped>
.typePercentEchartPage {
  width: 100%;
  height: 100%;
}
</style>
